<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<style>
    html, body{
        height: 100%; width: 100%; padding: 0;
    }
    body{
        background: url('/Public/game/images/ep02/back2.jpg') center no-repeat; background-size: 100% 100%;
    }
    #main, #clue {
        display: flex; flex-direction: column; align-items: center;justify-content: center; height: 100%;;
    }
    .popup {
        display: none;
        position: fixed;
        width: 100%; height: 100%;
        top:0; left:0;
        background: url('/Public/game/images/ep02/back1.jpg') center no-repeat; background-size: contain;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;font-size:2rem;
    }
    h1{
        display: flex; flex-direction: column; align-items: center;justify-content: center;margin:auto;
    }
    a{
       margin-top: 10vh; width:30vh; height: 10vh;
    }
    a img{
        height: 100%; width: 100%;object-fit: contain;
    }
    a:active img{
        transform: scale(0.9);
    }
</style>
<body>
    <div id="main">
        <h1>
            准备界面<br/>
            <button onclick="onInput()">输入</button>
        </h1>
    </div>
    <div id="input" class="popup">
        <input type="number" style="width: 50%;">
        <div>
            <button onclick="onSend()">发送</button>
            <button onclick="onInput()">关闭</button>
        </div>

    </div>
    <div id="clue" class="popup">

    </div>
    <div id="send" class="popup">
            已发送，等待结果
    </div>
</body>
<script>
    let input = false
    let status = 'index'
    let clue = ''
    console.log(window.location.href);
    function getUrlParams(url) {
        const searchParams = new URLSearchParams(url.split('?')[1]);
        const params = {};
        for (const [key, value] of searchParams.entries()) {
            params[key] = value;
        }
        return params;
    }
    let params = getUrlParams(window.location.href);
    // $('a').attr('href','/Home/Trial/game?id=' + params.id)
    function onInput(){
        input = !input;
        update();
    }
    function onSend(){
        let inputContent = $('#input input').val()
        if(!inputContent){
            alert('请输入正确的密码')
            return;
        }
        status = 'send'
        input = false;
        update();
        $.ajax({
            url:'/Home/Trial/set_data',
            data:{id:params.id, password:inputContent, status:'send'},
        })
    }
    function getData(){
        $.ajax({
            url:'/Home/Trial/get_data?id=' + params.id,
            type:'get',
            success:function(res){
                status = res.data.status
                if(status == 'clue'){
                    clue = res.data.clue.content
                }
                update();
                setTimeout(()=>{
                    getData()
                },2000)
            }
        })
    }
    // 刷新
    getData()
    function update(){
        if(status == 'index'){
            $('#send').css('display', 'none')
            $('#clue').css('display', 'none')
        }
        else if(status == 'send'){
            $('#clue').css('display', 'none')
            $('#send').css('display', 'flex')
        }
        else if(status == 'clue'){
            $('#send').css('display', 'none')
            $('#clue').css('display', 'flex')
            $('#clue').text(clue)
        }
        if(input){
            $('#input').css('display', 'flex');
        }else{
            $("#input").css('display', 'none');
        }
    }
</script>
</html>